<template>
  <el-card>
    <el-form
      label-width="80px"
      :model="skuFormData"
      :rules="skuFormRules"
      ref="skuFormRef"
    >
      <el-form-item label="Sku名称" prop="skuName">
        <el-input
          placeholder="请输入Sku名称"
          v-model="skuFormData.skuName"
        ></el-input>
      </el-form-item>
      <el-form-item label="Sku描述" prop="skuDesc">
        <el-input
          type="textarea"
          placeholder="请输入Sku描述"
          v-model="skuFormData.skuDesc"
        ></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input-number
          placeholder="请输入Sku价格"
          controls-position="right"
          class="input-number"
          v-model="skuFormData.price"
          :min="0"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="重量" prop="weight">
        <el-input-number
          placeholder="请输入Sku重量"
          controls-position="right"
          class="input-number"
          v-model="skuFormData.weight"
          :min="0"
        ></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
defineOptions({
  name: "Sku",
});

import { reactive, ref } from "vue";

const skuFormData = reactive({
  skuName: "",
  skuDesc: "",
  price: 0,
  weight: 0,
});

const skuFormRules = reactive({
  // 规则名称必须和数据名称一致
  skuName: [
    {
      required: true,
      message: "请输入SKU名称",
      trigger: "blur",
    },
  ],
  skuDesc: [
    {
      required: true,
      message: "请输入SKU描述",
      trigger: "blur",
    },
  ],
  price: [
    {
      required: true,
      message: "请输入SKU价格",
      trigger: "blur",
    },
  ],
  weight: [
    {
      required: true,
      message: "请输入SKU重量",
      trigger: "blur",
    },
  ],
});

const skuFormRef = ref();

const submit = async () => {
  await skuFormRef.value.validate();
  console.log("表单校验通过", skuFormData);
};
</script>

<style scoped>
.input-number {
  width: 100%;
}

.input-number :deep(.el-input__inner) {
  text-align: left;
}
</style>
